<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
  <div class="content-manager" v-loading="loading">

    <div style="display: flex; flex-direction: row-reverse;">

      <files-picker @delete="deleteHandle" @change="changeHandle" @append="appendHandle" @drag="dragHandle"
        v-model="fileItems" :limit="100" :file-types="['pdf', 'doc', 'docx', 'text', 'xls', 'xlsx']"></files-picker>
    </div>

    <el-table v-loading="loading" style="width: 100%" :data="fileItems" size="small" fit highlight-current-row>
      <el-table-column prop="id" label="#" width="80px"></el-table-column>
      <el-table-column prop="filename" label="文件名" width="280px"></el-table-column>
      <el-table-column prop="created_at" label="上传时间"></el-table-column>
      <el-table-column label="操作" width="120px">
        <template slot-scope="scope">
          <el-link type="danger" @click="deleteHandle(scope.$index)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<style lang="scss" scoped>
.tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>

<script>
import { updateAuctionHouseFile } from "@/api/auctionhouse";
import FilesPicker from "./Files.vue";

export default {
  components: {
    FilesPicker,
  },
  props: {
    house: { type: Object, default: {} },
  },

  computed: {
    fileItems: {
      get() {
        if (this.house.files) {
          var arr = this.house.files
        } else {
          var arr = [];
        }
        return arr;
      },
      set(val) {

        this.house.files = val;
      },
    },
  },

  data() {
    return {
      loading: false,
    };
  },

  watch: {},

  created: function () { },

  methods: {
    submitHandle: function () {

      if (!this.house.files) {
        this.$message.error("请选择厂房附件");
        return;
      }
      this.loading = true;

      updateAuctionHouseFile(this.house).then((resp) => {
        this.loading = false;
        if (resp.status === 0) {
          this.$emit("change", resp.data);
          this.$message({ type: "success", message: "保存成功" });
        }
      });
    },

    deleteHandle: function (index) {
      var msg =
        "您确定要删除这条数据吗？";
      this.$confirm(msg, "删除确认").then((resp) => {
        console.log("delete handle", index);
        // TODO
        // var mid = this.fileItems[index].id;
        var fileItems = this.fileItems;
        fileItems.splice(index, 1);
        this.fileItems = fileItems;
        this.submitHandle()
      });

    },

    appendHandle: function (items) {
      if (items.length == 0) {
        this.$message.success("添加成功");
        this.loading = false;
        this.loadData();
        return;
      }

      var arr = this.fileItems.concat(items);
      console.log(arr, "1212");
      this.fileItems = arr;
      this.submitHandle()
    },

    changeHandle: function (e) {
      // 修改了某个文件的链接
      console.log("change handle", e);
      var url = e.item.url;
      this.fileItems[e.index].url = url;
    },

    dragHandle: function (items) {
      // 移动完成
      // TODO
      this.fileItems = items;
    },
  },
};
</script>
